{% load i18n %}
<html><head>
<title>{% trans "jqGrid Demo for jqGrind 3.3.1" %}</title>
<link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/media/js/jqGrid/themes/jqModal.css" />
<script src="/media/js/jqGrid/jquery.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/js/jqModal.js" type="text/javascript"></script>
<script src="/media/js/jqGrid/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
              jQuery("#list").jqGrid({
                            url:'/agenda/ajax_jqgrid',
                            datatype: 'json',
                            colNames:['FIRST NAME', 'LAST NAME',  'AGE', 'PHONE', 'COMMENTS'],
                            colModel :[
                                {name:"first_name", index:"first_name", width:120, jsonmap:"first_name",sortable:true },
                                {name:"last_name", index:"last_name", width:120, jsonmap:"last_name",sortable:true },
                                {name:"age", index:"age", width:40, align:"left", jsonmap:"age",sortable:false  },
                                {name:"phone", index:"phone", width:100, align:'center', jsonmap:"phone", sortable:false  },
                                {name:"comments", index:"comments", width:240, align:'left', jsonmap:"comments",sortable:false  },
                            ], 
                            pager: jQuery('#pager'),
                            jsonReader: {
                                root: "rows",
                                id: "pk",
                                page: "page",
                                total: "total",
                                records: "records",
                                repeatitems: false,
                                cell: "fields"
							},
							sortname:"id",
							sortorder:"asc",
                            rowNum:5,
                            rowList:[5,10,20],
                            viewrecords:true,
                            imgpath:"/media/js/jqGrid/themes/basic/images",
                            caption:"Agenda",
                            height:210,
                            toolbar: [true,'top']
              });
			  $("#bsdata").click(function(){ jQuery("#list").searchGrid( {sopt:['cn','bw','eq','ne','lt','gt','ew']} ); });
			  jQuery("#list").navGrid('#pager',{edit:false,add:false,del:false});

});
</script>
</head>
<body>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
<input type="BUTTON" id="bsdata" value="Search" />
</body>
</html>
